<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Add/Delete Series</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>
		<script>
			let xs = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
			let vals = [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10];

			let data = [
				xs,
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
			];

			const opts = {
				width: 1920,
				height: 600,
				title: "Area Fill",
				scales: {
					x: {
						time: false,
					},
				},
				hooks: {
					addSeries: [
						(u, seriesIdx) => {
							console.log("addSeries" + (u.status == 0 ? " (init)" : ""), seriesIdx);
						}
					],
					delSeries: [
						(u, seriesIdx) => {
							console.log("delSeries", seriesIdx);
						}
					],
				},
				series: [
					{},
					{
						stroke: "red",
						fill: "rgba(255,0,0,0.1)",
					},
					{
						stroke: "green",
						fill: "rgba(0,255,0,0.1)",
					},
					{
						stroke: "blue",
						fill: "rgba(0,0,255,0.1)",
					},
				],
			};

			let u = new uPlot(opts, data, document.body);
		</script>

		<button id="add">Add Series</button>
		<button id="del">Del Series</button>

		<script>
			document.querySelector("#add").onclick = () => {
				let sidx = 2;

				u.addSeries({
					stroke: "orange",
					fill: "rgba(255,165,0,0.1)",
				}, sidx);

				let newData = xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]);
				data.splice(sidx, 0, newData);
				u.setData(data);
			};

			document.querySelector("#del").onclick = () => {
				let sidx = 2;

				u.delSeries(sidx);
				data.splice(sidx, 1);
				u.setData(data);
			};
		</script>
	</body>
</html>